<template>

	<view :class="'vip_bg'+(level==0?'':level)" v-if="loading" style="padding-top: 150rpx;">
		<view @click="back"
			style="position: fixed;top:0;left:0;width: 100%;z-index: 99;background:linear-gradient(to bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));">
			<view style="width:100%;height:50rpx"></view>
			<uv-navbar :title="$t('会员中心')" leftIconColor="#fff" titleStyle="color:#fff" :fixed="false"
				bg-color="rgba(0,0,0,0)"></uv-navbar>
		</view>

		<view class="vip_hi" v-if="level==1">{{$t('您好，尊敬的')}} GLUZ {{$t('黄金会员，欢迎回家')}}! </view>
		<view class="vip_hi" v-if="level==2">{{$t('您好，尊敬的')}} GLUZ {{$t('铂金会员，欢迎回家')}}! </view>
		<view class="vip_hi" v-if="level==3">{{$t('您好，尊敬的')}} GLUZ {{$t('钻石会员，欢迎回家')}}! </view>

		<view class="vip_user" v-if="userInfo">
			<image class="ph" src="/static/waib/ph.png" mode="aspectFill"></image>
			<view class="info">
				<view class="name">
					{{userInfo.username}}
				</view>
				<view class="renz" v-if="userInfo.is_audit==2">
					<image class="ico" src="/static/waib/ico_3.png" mode="widthFix"></image>
					<text>{{$t('已认证')}}</text>
				</view>
				<view class="renz" v-if="userInfo.is_audit!=2">
					<image class="ico" src="/static/waib/ico_3.png" mode="widthFix"></image>
					<text>{{$t('未认证')}}</text>
				</view>
			</view>
		</view>

		<view class="vip_lv">
			<swiper class="vip_lv_swiper" previous-margin="34rpx" next-margin="34rpx" :autoplay="false" @change="changeSwiper" :current="levelIndex">
				<swiper-item style="padding-top: 5rpx;" v-for="(item,index) in 3" :key="index">
					<view class="swiper_item" style="background: transparent;margin: 0;padding: 0;">
						<image v-if="index==0" class="tit" src="/static/waib/level1.png" mode="widthFix"
							style="width: 100%;margin: 0;padding: 0;top:-20rpx;"></image>
						<image v-if="index==1" class="tit" src="/static/waib/level2.png" mode="widthFix"
							style="width: 100%;margin: 0;padding: 0;top:-20rpx;"></image>
						<image v-if="index==2" class="tit" src="/static/waib/level3.png" mode="widthFix"
							style="width: 100%;margin: 0;padding: 0;top:-20rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- <swiper class="vip_lv_swiper" previous-margin="34rpx" next-margin="34rpx" v-if="level!=0">
				<swiper-item style="padding-top: 5rpx;">
					<view class="swiper_item" style="background: transparent;margin: 0;padding: 0;position: relative;">
						<image class="tit" :src="'/static/waib/level'+level+'.png'" mode="widthFix"
							style="width: 100%;margin: 0;padding: 0;top:-20rpx;"></image>
						<view style="position: absolute;top: 90%;left: 67%;font-size: 12px; color: white; ">
							{{userInfo.vip_expire_at}} {{$t('到期')}}</view>
					</view>
				</swiper-item>
			</swiper> -->
		</view>

		<view class="vip_tabs1" v-if="tab==0">
			<view class="item" :class="tab==0?'hover':''" @click="tabbar(0)">
				{{$t('黄金会员')}}
			</view>
			<view class="item" :class="tab==1?'hover':''" @click="tabbar(1)">
				{{$t('铂金会员')}}
			</view>
			<view class="item" :class="tab==2?'hover':''" @click="tabbar(2)">
				{{$t('钻石会员')}}
			</view>
		</view>
		<view class="vip_tabs" v-if="tab==1">
			<view class="item" :class="tab==0?'hover':''" @click="tabbar(0)">
				{{$t('黄金会员')}}
			</view>
			<view class="item" :class="tab==1?'hover':''" @click="tabbar(1)">
				{{$t('铂金会员')}}
			</view>
			<view class="item" :class="tab==2?'hover':''" @click="tabbar(2)">
				{{$t('钻石会员')}}
			</view>
		</view>
		<view class="vip_tabs2" v-if="tab==2">
			<view class="item" :class="tab==0?'hover':''" @click="tabbar(0)">
				{{$t('黄金会员')}}
			</view>
			<view class="item" :class="tab==1?'hover':''" @click="tabbar(1)">
				{{$t('铂金会员')}}
			</view>
			<view class="item" :class="tab==2?'hover':''" @click="tabbar(2)">
				{{$t('钻石会员')}}
			</view>
		</view>


		<view class="bgff3">
			<view class="jiesuo" v-if="userInfo.is_expire==2">
				<block v-if="userInfo.level!=0">
					<view class="name">
						{{$t('续费会员')}}
					</view>
					<view class="btn">
						9.0{{$t('折')}}
					</view>
				</block>
				<block v-if="userInfo.level==0">
					<view class="name">
						{{$t('新会员开通会员特惠')}}
					</view>
					<view class="btn">
						9.0{{$t('折')}}
					</view>
				</block>
			</view>
			
			<view class="jiesuo" v-if="userInfo.is_expire==1">
				<block v-if="userInfo.level==1||userInfo.level==2">
					<view class="name">
						{{$t('升级会员解锁更多权益')}}
					</view>
					<view class="btn">
						{{$t('补差价')}}
					</view>
				</block>
				<block v-if="userInfo.level==3">
					<view class="name">
						{{$t('续费会员')}}
					</view>
					<view class="btn">
						9.0{{$t('折')}}
					</view>
				</block>
				<block v-if="userInfo.level==0">
					<view class="name">
						{{$t('新会员开通会员特惠')}}
					</view>
					<view class="btn">
						9.0{{$t('折')}}
					</view>
				</block>
			</view>
			
			<view class="jiesuo" v-if="userInfo.is_expire==0">
				<view class="name">
					{{$t('新会员开通会员特惠')}}
				</view>
				<view class="btn">
					9.0{{$t('折')}}
				</view>
			</view>


			<view class="vip_jiage" v-if="tab==0&&vipList&&vipList.length!=0">
				<view class="item" :class="select_btn==0?'hover':''" @click="btn(0)">
					<view class="name">
						{{$t('一个月')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[0]['om_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[0]['om_price_unit']}}元/月
					</view>
				</view>
				<view class="item" :class="select_btn==2?'hover':''" @click="btn(2)">
					<view class="name">
						{{$t('三个月')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[0]['tm_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[0]['tm_price_unit']}}元/月
					</view>
				</view>
				<view class="item" :class="select_btn==1?'hover':''" @click="btn(1)">
					<view class="name">
						{{$t('一年')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[0]['oy_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[0]['oy_price_unit']}}元/月
					</view>
					<view class="tag">
						{{$t('限时优惠')}}
					</view>
				</view>
			</view>

			<view class="vip_jiage" v-if="tab==1">
				<view class="item" :class="select_btn==0?'hover':''" @click="btn(0)">
					<view class="name">
						{{$t('一个月')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[1]['om_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[1]['om_price_unit']}}元/月
					</view>
				</view>
				<view class="item" :class="select_btn==2?'hover':''" @click="btn(2)">
					<view class="name">
						{{$t('三个月')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[1]['tm_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[1]['tm_price_unit']}}元/月
					</view>
				</view>
				<view class="item" :class="select_btn==1?'hover':''" @click="btn(1)">
					<view class="name">
						{{$t('一年')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[1]['oy_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[1]['oy_price_unit']}}元/月
					</view>
					<view class="tag">
						{{$t('限时优惠')}}
					</view>
				</view>
			</view>

			<view class="vip_jiage" v-if="tab==2">
				<view class="item" :class="select_btn==0?'hover':''" @click="btn(0)">
					<view class="name">
						{{$t('一个月')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[2]['om_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[2]['om_price_unit']}}元/月
					</view>
				</view>
				<view class="item" :class="select_btn==2?'hover':''" @click="btn(2)">
					<view class="name">
						{{$t('三个月')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[2]['tm_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[2]['tm_price_unit']}}元/月
					</view>
				</view>
				<view class="item " :class="select_btn==1?'hover':''" @click="btn(1)">
					<view class="name">
						{{$t('一年')}}VIP
					</view>
					<view class="num">
						¥<text>{{vipList[2]['oy_price']}}</text>
					</view>
					<view class="yue">
						{{vipList[2]['oy_price_unit']}}元/月
					</view>
					<view class="tag">
						{{$t('限时优惠')}}
					</view>
				</view>
			</view>


			<view class="vip_tips" v-if="tab==0">
				开通赠送1599会员{{$t('积分')}}，并获得{{$t('黄金会员')}}{{$t('全部')}}权益。
			</view>
			<view class="vip_tips" v-if="tab==1">
				开通赠送6000会员{{$t('积分')}}，并获得{{$t('铂金会员')}}{{$t('全部')}}权益。
			</view>
			<view class="vip_tips" v-if="tab==2">
				开通赠送10000会员{{$t('积分')}}，并获得{{$t('钻石会员')}}{{$t('全部')}}权益。
			</view>


			<view class="vip_kai" @click="goPayMehx">
				<!-- <image src="/static/waib/backImgVip.png" mode="widthFix"></image> -->
				<p v-if="tab==0" class="confirmText">{{$t('确认协议并开通')}} 立得1599{{$t('积分')}}</p>
				<p v-if="tab==1" class="confirmText">{{$t('确认协议并开通')}} 立得6000{{$t('积分')}}</p>
				<p v-if="tab==2" class="confirmText">{{$t('确认协议并开通')}} 立得10000{{$t('积分')}}</p>
			</view>
		</view>

		<view class="shouy">
			<view class="sy_title">
				<view class="name">
					{{$t('查看会员权益')}}
				</view>
				<image class="ico_7" src="/static/waib/ico_7.png" mode="widthFix"></image>
				<view class="name_2" @click="shouqi">
					<text v-if="show">{{$t('收起')}}</text>
					<text v-if="!show">{{$t('展开')}}</text>
				</view>
				<image class="ico_8" src="/static/waib/ico_8.png" mode="widthFix"></image>
			</view>

			<view class="table_pro">
				<image class="table_ico"  v-if="show==true" src="/static/waib/ico_9.png" mode="widthFix"></image>

				<view class="table" v-if="show==true">
					<view class="table_tr">
						<view class="item_title">
							<view class="text_left">
								{{$t('会员权益')}}
							</view>
							<view class="text_right">
								{{$t('会员等级')}}
							</view>
						</view>
						<view class="item">
							{{$t('非会员')}}
						</view>
						<view class="item">
							{{$t('黄金会员')}}
						</view>
						<view class="item">
							{{$t('白金会员')}}
						</view>
						<view class="item">
							{{$t('钻石会员')}}
						</view>
					</view>


					<view class="table_td" v-if="get(quanyi,'0.group')" v-for="(item,index) in get(quanyi,'0.group')">
						<view class="item_name">
							{{item.name}}
						</view>
						<view class="item" v-for="(it,ind) in item['privilege']">
							<image class="ico_d" src="/static/waib/ico_6.png" mode="aspectFill" v-if="it.val=='false'">
							</image>
							<image class="ico_d" src="/static/waib/ico_5.png" mode="aspectFill" v-else-if="it.val=='true'">
							</image>
							<text v-else> {{it.val}} {{it.unit}} <text v-if="it.unit2">/ {{it.unit2}}</text> </text>
							
						</view>
					</view>


					<block v-for="(val,key) in 8" :key="key">
						<view class="table_th" v-if="quanyi&&quanyi[key+1]">
							{{quanyi[key+1]['name']}}
						</view>

						<view class="table_td" v-if="get(quanyi,key+1+'.group')"
							v-for="(item,index) in get(quanyi,key+1+'.group')" :key="index">
							<view class="item_name">
								{{item.name}}
							</view>
							<view class="item" v-for="(it,ind) in item['privilege']">
								<image class="ico_d" src="/static/waib/ico_6.png" mode="aspectFill"
									v-if="it.val=='false'"></image>
								<image class="ico_d" src="/static/waib/ico_5.png" mode="aspectFill"
									v-else-if="it.val=='true'"></image>
								<text v-else> {{it.val}} {{it.unit}} <text v-if="it.unit2">/ {{it.unit2}}</text> </text>
							</view>
						</view>
					</block>

				</view>
			</view>
		</view>
		<payType v-if="showPayType" :show="showPayType" @close="closePayType" @change="changePayType" />
	</view>
</template>

<script>
import payType from "./payType.vue";
	export default {
		data() {
			return {
				userInfo: {},
				tab: 0,
				currentImg: 0,
				vipList: [],
				select_btn: 0,
				quanyi: [],
				loading: false,
				show:true,
				openid: '',
				level: 0,
				// 支付
				showPayType: false,
				pay_type: 'wx',
				levelIndex: 0
			}
		},
		onLoad() {
			this.getUserInfo()
			this.vip_set()
			this.quanyi_action()
		},
		components: {
			payType
		},
		methods: {
			changeSwiper(e) {
				console.log('index', e)
				this.tab = e.detail.current
				this.levelIndex = e.detail.current
			},
			goPayMehx() {
				this.showPayType = true;
			},
			closePayType() {
				this.showPayType = false
			},
			changePayType(e) {
				this.pay_type = e
				this.buyvip()
			},
			shouqi(){
				if(this.show==true){
					this.show=false
				}else{
					this.show=true
				}
			},
			back(){
				uni.navigateBack(-1)
			},
			// 切换会员等级
			tabbar(i) {
				this.tab = i
				this.levelIndex = i;
			},
			btn(i) {
				this.select_btn = i
			},
			zanwei() {
				uni.showToast({
					title: '敬请期待'
				})
			},
			quanyi_action() {
				var that = this
				uni.request({
					url: 'https://app.gluz.com.cn/api/userAudit/privilege',
					data: {
						user_id: uni.getStorageSync('user_id')
					},
					header: {
						"user_id": uni.getStorageSync('user_id'),
						'xzdToken': uni.getStorageSync('xzdToken'),
						'version': uni.getStorageSync('version'),
						'lang': uni.getStorageSync('lang'),
					},
					success: (res) => {
						that.quanyi = res.data.data;
					}
				});
			},
			getUserInfo() {
				uni.request({
					url: 'https://app.gluz.com.cn/api/user/getUserHomepage2',
					data: {
						user_id: uni.getStorageSync('user_id')
					},
					header: {
						"user_id": uni.getStorageSync('user_id'),
						'xzdToken': uni.getStorageSync('xzdToken'),
						'version': uni.getStorageSync('version'),
						'lang': uni.getStorageSync('lang'),
					},
					success: (res) => {
						this.userInfo = res.data.data.userInfo;
						this.level = this.userInfo.level
						if(this.level<=1){
							this.tab=0
						}
						if(this.level==2){
							this.tab=1
						}
						if(this.level==3){
							this.tab=2
						}
						this.levelIndex = this.tab
						
						uni.setStorageSync('userInfoFull', res.data.data.userInfo)
					}
				});
			},

			vip_set() {
				var that = this
				uni.request({
					url: 'https://app.gluz.com.cn/api/basic/getVipSet',
					data: {
						user_id: uni.getStorageSync('user_id')
					},
					header: {
						"user_id": uni.getStorageSync('user_id'),
						'xzdToken': uni.getStorageSync('xzdToken'),
						'version': uni.getStorageSync('version'),
						'lang': uni.getStorageSync('lang'),
					},
					success: (res) => {
						that.vipList = res.data.data
						that.loading = true
					}
				});
			},

			buyvip() {
				const that = this

				if (that.pay_type === '') {
					that.$u.toast(this.$t('请选择支付方式'))
					return false
				}

				if (this.tab == 0) {
					var vip_id = 1
				}
				if (this.tab == 1) {
					var vip_id = 2
				}
				if (this.tab == 2) {
					var vip_id = 3
				}

				if (this.select_btn == 0) {
					var current = 'om_price'
				}
				if (this.select_btn == 1) {
					var current = 'tm_price'
				}
				if (this.select_btn == 2) {
					var current = 'oy_price'
				}

				if (this.tab == 0) {
					if (this.select_btn == 0) {
						var vip_price = that.vipList[0]['om_price']
					}
					if (this.select_btn == 1) {
						var vip_price = that.vipList[0]['tm_price']
					}
					if (this.select_btn == 2) {
						var vip_price = that.vipList[0]['oy_price']
					}
				}

				if (this.tab == 1) {
					if (this.select_btn == 0) {
						var vip_price = that.vipList[1]['om_price']
					}
					if (this.select_btn == 1) {
						var vip_price = that.vipList[1]['tm_price']
					}
					if (this.select_btn == 2) {
						var vip_price = that.vipList[1]['oy_price']
					}
				}
				if (this.tab == 2) {
					if (this.select_btn == 0) {
						var vip_price = that.vipList[2]['om_price']
					}
					if (this.select_btn == 1) {
						var vip_price = that.vipList[2]['tm_price']
					}
					if (this.select_btn == 2) {
						var vip_price = that.vipList[2]['oy_price']
					}
				}

				uni.showLoading({
					title: '正在吊起支付..',
				})
				uni.request({
					url: 'https://app.gluz.com.cn/api/users/vip/createVipOrder',
					data: {
						user_id: uni.getStorageSync('user_id'),
						vip_id: vip_id,
						vip_type: current,
						vip_price: vip_price,
						pay_type: this.pay_type,
						openid: '',
						method: 'app'
					},
					method: 'POST',
					header: {
						"user_id": uni.getStorageSync('user_id'),
						'xzdToken': uni.getStorageSync('xzdToken'),
						'version': uni.getStorageSync('version'),
						'lang': uni.getStorageSync('lang'),
					},
					success: (res) => {
						uni.hideLoading({})
						if (res.data.code == 1) {
							if (this.pay_type == 'wxpay') {
								this.isMessageGo({
									action: 'wxPay',
									data: JSON.stringify(res.data.data)
								})
							}
							if (this.pay_type == 'alipay') {
								this.isMessageGo({
									action: 'aliPay',
									data: JSON.stringify(res.data.data)
								})
							}
						} else {
							uni.showToast({
								title: res.data.msg || res.data.message || res.msg,
								icon: 'none',
							})
						}

						this.showPayType = false;
					
					}
				});


			},

		}
	}
</script>

<style lang="scss" scoped>
	.table_pro {
		padding-top: 25rpx;
		margin-top: 10rpx;
		position: relative;

		.table_ico {
			position: absolute;
			left: 70rpx;
			top: 0rpx;
			width: 70rpx;
		}
	}

	.shouy {
		padding: 0 24rpx;

		.sy_title {
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.ico_7 {
				flex-shrink: 0;
				width: 22rpx;
				margin: 0 30rpx 0 6rpx;
			}

			.ico_8 {
				flex-shrink: 0;
				width: 18rpx;
				margin-left: 6rpx;
			}

			.name {
				color: #FF3C00;
				text-decoration: underline;
			}

			.name_2 {
				color: #999;
			}
		}

		.table {
			border: 1rpx solid #FFD48B;
			border-radius: 16rpx;
			overflow: hidden;
			background: #FFFCF7;
			text-align: center;
			position: relative;
			z-index: 9;

			.table_th {
				color: #640000;
				font-size: 24rpx;
				line-height: 40rpx;
				padding: 15rpx 0;
				background: linear-gradient(to right, #FFE8C0, #FFF6E6, #FFE8C0);
			}

			.table_tr {
				text-align: center;
				display: flex;
				align-items: stretch;
				justify-content: space-between;
				text-align: center;

				.item_title {
					flex-shrink: 0;
					width: 200rpx;
					color: #580000;
					font-size: 22rpx;
					line-height: 40rpx;
					position: relative;
					height: 90rpx;
					background: url('/static/waib/ico_line.png') no-repeat;
					background-size: 100% 100%;

					.text_left {
						position: absolute;
						left: 14rpx;
						bottom: 2rpx;
					}

					.text_right {
						position: absolute;
						right: 14rpx;
						top: 2rpx;
					}
				}

				.item {
					width: 100%;
					min-height: 70rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					border-left: 1rpx solid #FFD48B;
					text-align: center;
				}
			}

			.table_td {
				border-top: 1rpx solid #FFD48B;

				.item_name {
					flex-shrink: 0;
					width: 200rpx;
					color: #580000;
					font-size: 24rpx;
					line-height: 30rpx;
					padding: 15rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}

				.item {
					width: 100%;
					min-height: 70rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					border-left: 1rpx solid #FFD48B;
					font-size: 22rpx;
					line-height: 30rpx;
					padding: 10rpx;

					text {
						display: block;
						font-size: 20rpx;
						line-height: 24rpx;
						color: #8C8C8C;
					}
				}
			}

			.ico_d {
				flex-shrink: 0;
				display: block;
				width: 30rpx;
				height: 30rpx;
				margin: 0 auto;
			}

			.table_tr {
				display: flex;
				align-items: stretch;
				justify-content: space-between;

				.item {
					color: #580000;
					font-size: 22rpx;
					line-height: 40rpx;
				}
			}

			.table_td {
				display: flex;
				align-items: stretch;
				justify-content: space-between;
			}
		}
	}

	.vip_tips {
		font-size: 22rpx;
		color: #666;
		line-height: 40rpx;
		padding: 30rpx 0 25rpx;
	}

	.vip_kai {
		cursor: pointer;
		margin-top: 10rpx;
		position: relative;
		background: url('/static/waib/backImgVip.png') no-repeat;
		background-size: 100% 100%;
		// width: 96%;
		height: 94rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			display: block;
			width: 100%;
			position: relative;
		}
		.confirmText {
			color: #7D2800;
			font-size: 32rpx;
			// position: absolute;
			// top: 25rpx;
			// left: 19%;
		}
	}

	.vip_jiage {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		margin-top: 50rpx;

		.item {
			width: 208rpx;
			height: 256rpx;
			flex-shrink: 0;
			text-align: center;
			background: url('/static/waib/bg_6.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			padding: 25rpx 20rpx 20rpx;
			box-sizing: border-box;
			position: relative;

			.tag {
				position: absolute;
				left: -8rpx;
				top: -14rpx;
				width: 142rpx;
				height: 47rpx;
				background: url('/static/waib/bg_7.png') no-repeat;
				background-size: 100% 100%;
				color: #fff;
				font-size: 20rpx;
				line-height: 34rpx;
			}

			.name {
				font-size: 26rpx;
				line-height: 30rpx;
			}

			.num {
				font-size: 22rpx;
				font-weight: bold;

				text {
					font-size: 44rpx;
				}
			}

			.yue {
				width: 100%;
				background: #ECF4FF;
				border-radius: 10rpx;
				line-height: 40rpx;
				text-align: center;
				color: #1A4D90;
				font-size: 22rpx;
			}

			&.hover {
				background: url('/static/waib/bg_6a.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.jiesuo {
		height: 58rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url('/static/waib/bg_5.png') no-repeat;
		background-size: 100% 100%;
		padding: 0 30rpx;

		.name {
			color: #75370F;
			font-size: 24rpx;
			font-weight: bold;
			line-height: 30rpx;
		}

		.btn {
			color: #FF0000;
			font-weight: bold;
			font-size: 26rpx;
			line-height: 30rpx;
		}
	}

	.bgff3 {
		background: #fff;
		padding: 40rpx 35rpx;
	}

	.vip_tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #2D2F3C url('/static/waib/bg_8.png') no-repeat center top;
		background-size: 100% auto;
		height: 66rpx;
		padding: 0 40rpx;

		.item {
			position: relative;
			color: #fff;
			font-size: 26rpx;
			font-weight: bold;
			padding: 0 30rpx;

			&.hover {
				color: #0064E4;
			}
		}
	}

	.vip_tabs1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #2D2F3C url('/static/waib/left.png') no-repeat center top;
		background-size: 100% auto;
		height: 66rpx;
		padding: 0 40rpx;

		.item {
			position: relative;
			color: #fff;
			font-size: 26rpx;
			font-weight: bold;
			padding: 0 30rpx;

			&.hover {
				color: #0064E4;
			}
		}
	}

	.vip_tabs2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #2D2F3C url('/static/waib/right.png') no-repeat center top;
		background-size: 100% auto;
		height: 66rpx;
		padding: 0 40rpx;

		.item {
			position: relative;
			color: #fff;
			font-size: 26rpx;
			font-weight: bold;
			padding: 0 30rpx;

			&.hover {
				color: #0064E4;
			}
		}
	}

	.vip_lv_swiper {
		height: 280rpx;
		box-sizing: border-box;
		position: relative;

		.swiper_item {
			background: url('/static/waib/bg_4.png') no-repeat;
			background-size: 100% 100%;
			padding: 45rpx 36rpx 0;
			height: 210rpx;
			box-sizing: border-box;
			margin: 0 10rpx;

			.img_3 {
				position: absolute;
				right: 20rpx;
				top: -20rpx;
				width: 200rpx;
			}

			.tit {
				width: 248rpx;
				display: block;
			}

			.ico_up {
				width: 32rpx;
			}

			.line_v {
				width: 380rpx;
				height: 2rpx;
				margin: 20rpx 0 15rpx;
				background: linear-gradient(to right, #8ABFFF, rgba(161, 203, 255, 0));
			}

			.text {
				color: #fff;
				font-size: 24rpx;
				line-height: 30rpx;

				text {
					font-size: 50rpx;
					font-weight: bold;
					padding: 0 6rpx;
				}
			}
		}
	}

	.vip_user {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 34rpx 0;

		.ph {
			flex-shrink: 0;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.info {
			width: 100%;

			.name {
				color: #fff;
				font-size: 32rpx;
				line-height: 40rpx;
			}

			.renz {
				display: inline-flex;
				align-items: center;
				background: #FC860C;
				height: 35rpx;
				border-radius: 20rpx;
				padding: 0 20rpx 0 4rpx;
				margin-top: 10rpx;

				.ico {
					flex-shrink: 0;
					width: 30rpx;
					margin-right: 6rpx;
				}

				text {
					display: block;
					color: #fff;
					font-size: 20rpx;
					line-height: 20rpx;
				}
			}
		}
	}

	.vip_hi {
		height: 48rpx;
		line-height: 48rpx;
		overflow: hidden;
		border-radius: 25rpx;
		padding: 0 20rpx;
		font-size: 22rpx;
		color: #999;
		background: rgba(0, 0, 0, 0.2);
		margin: 0 34rpx;
	}

	.vip_bg {
		// height: 1000px;
		background: url('/static/waib/bg_2.png') no-repeat center top;
		background-size: 100% auto;
	}
	
	.vip_bg1 {
		// height: 1000px;
		background: url('/static/waib/bg_22.png') no-repeat center top;
		background-size: 100% auto;
	}

	.vip_bg2 {
		// height: 1000px;
		background: url('/static/waib/bg_2.png') no-repeat center top;
		background-size: 100% auto;
	}

	.vip_bg3 {
		// height: 1000px;
		background: url('/static/waib/bg_222.png') no-repeat center top;
		background-size: 100% auto;
	}
</style>